<script setup>
import Navbar from "@/components/base/Navbar.vue";
</script>

<template>
  <div class="oj-main-layout">
    <div class="oj-main-layout-header">
      <div class="oj-main-layout-nav">
        <Navbar></Navbar>
      </div>
    </div>
    <div v-if="$route.meta.showBanner">
      <img src="@/assets/images/navbarBack.png" class="banner-img">
    </div>
  </div>
  <RouterView/>
</template>

<style lang="scss" scoped>
.el-main {
  padding: 0;
}

.oj-main-layout {
  // background-color: #f7f7f7;
  padding-top: 20px;

  .banner-img {
    max-width: 1520px;
    margin: 0 auto;
    border-radius: 16px;
    width: 100%
  }

  .oj-main-layout-header {
    height: 60px;
    position: absolute;
    width: 100%;
    background: #fff;
    left: 0;
    top: 0;
    z-index: 3;
    overflow: hidden;
  }

  .oj-main-layout-nav {
    max-width: 1520px;
    min-width: 100%;
    margin: 0 auto;
    height: 60px;
    background: #fff;
  }

  // banner 图
  .oj-ship-banner {
    max-width: 1520px;
    min-width: 1520px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    height: 350px;
    // width: 1677px;
    color: #ffffff;
    background: url("@/assets/images/indexBack.png") left top no-repeat;
    background-size: cover;
    overflow: hidden;
  }
}
</style>